@use "scss/colors";
@use "scss/variables";

.button {
  border: 1px solid transparent;
  display: flex;
  gap: variables.$spacing-lg;
  align-items: center;
  padding: variables.$spacing-lg;
  box-shadow: variables.$box-shadow;
  background-color: colors.$foreground;
  border-radius: variables.$border-radius-md;
  cursor: pointer;
  transition: box-shadow variables.$transition ease;
  text-align: left;
  color: colors.$dark-blue;

  &:hover {
    box-shadow: variables.$box-shadow-raised;
    border-color: colors.$blue-100;
  }
}

.text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.supportLevel {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.icon {
  width: 38px;
  height: 38px;
}
